{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
    <title>{% block title %}{% endblock %}</title>
  <style>

body {
    min-width: 100%;
    height: auto
}


#wrap {
    min-width: 100%;
    position: absolute;
    background: #eff3f6 bottom;
    min-height: 100%;
    overflow: hidden
}

.leftMeun {
    position: absolute;
    box-sizing: border-box;
    width: 200px;
    height: 100%;
    background: #4d5e70 bottom
}

    .leftMeun > div {
        padding-left: 20px
    }

#rightContent {
    box-sizing: border-box;
    float: left;
    padding-left: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    clear: both;
    color: #717592;
    min-width: 100%;
    min-height: 500px
}

  </style>
  </head>

  <body>
  <header>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#"><h4 style="font-weight:bold">全景CRM</h4></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#"><h6>营销管理</h6></a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="#"><h6>客户管理</h6></a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="#"><h6>协同办公</h6></a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="#"><h6>商业智能</h6></a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="#"><h6>产品管理</h6></a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="#"><h6>综合设置</h6></a>
      </li>

    </ul>
      <a href="#" style="text-decoration: none;color: black;position: relative;right: 10%">
        <svg class="bi bi-table" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
          <path fill-rule="evenodd" d="M15 4H1V3h14v1z"/>
          <path fill-rule="evenodd" d="M5 15.5v-14h1v14H5zm5 0v-14h1v14h-1z"/>
          <path fill-rule="evenodd" d="M15 8H1V7h14v1zm0 4H1v-1h14v1z"/>
          <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2H0V2z"/>
        </svg>
        <p>
           <span style="color: black;font-size: 10px;position: relative;right: 5px">
                工作台
           </span>
       </p>
      </a>

      <a href="#" style="text-decoration: none;color: black;position: relative;right: 8%">
        <svg class="bi bi-bell-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
        </svg>
        <p>
           <span style="color: black;font-size: 10px">
                站内信
           </span>
       </p>
      </a>

    <a href="#" style="text-decoration: none;color: black;position: relative;right: 6%">
        <svg class="bi bi-plus" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
              <path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
        </svg>
          <p>
           <span style="color: black;font-size: 10px">
                创建
           </span>
       </p>
      </a>

   <a href="#" style="text-decoration: none;color: black;position: relative;right: 4%">
       <svg class="bi bi-question-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
          <path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
        </svg>
       <p>
           <span style="color: black;font-size: 10px;">
                帮助
           </span>
       </p>
   </a>

   <a href="#" style="text-decoration: none;color: black;position: relative;right: 2%">
       <svg class="bi bi-power" color="black" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M5.578 4.437a5 5 0 1 0 4.922.044l.5-.866a6 6 0 1 1-5.908-.053l.486.875z"/>
          <path fill-rule="evenodd" d="M7.5 8V1h1v7h-1z"/>
       </svg>
       <p>
           <span style="font-size: 10px;">
                退出
           </span>
       </p>
   </a>

  <a href="#" style="text-decoration: none;color: black;position: relative;right: 0">
  <svg class="bi bi-people-fill" color="black" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
  </svg>
      <p>
           <span style="color: black;font-size: 10px">
                用户头像
           </span>
       </p>
  </a>


  </div>
</nav>
  </header>

<div id="wrap">
        <div class="leftMeun" id="leftMeun">
            <div id="logoDiv">
                <p id="logoP">
                    <span></span>
                </p>
            </div>

        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link {% if page == 'workbench' %}active{% endif %}" id="v-pills-home-tab" href="{% url 'workbench' %}" role="tab" aria-selected="true" style="color: white;height: 55px;line-height: 35px"><img src="/static/img/circle.svg" style="position:relative;right:10px;bottom: 1px">工作台</a>
                <a class="nav-link {% if page == 'clue' %}active{% endif %}" id="v-pills-profile-tab"  href="{% url 'clue' %}" role="tab" aria-controls="v-pills-profile" aria-selected="false" style="color: white;height: 55px;line-height: 35px"><img src="/static/img/circle.svg" style="position:relative;right:10px;bottom: 1px">线索</a>
                <a class="nav-link {% if page == 'client' %}active{% endif %}" id="v-pills-messages-tab"  href="{% url 'client' %}" role="tab" aria-controls="v-pills-messages" aria-selected="false" style="color: white;height: 55px;line-height: 35px"><img src="/static/img/circle.svg" style="position:relative;right:10px;bottom: 1px">客户</a>
                <a class="nav-link {% if page == 'business' %}active{% endif %}" id="v-pills-settings-tab"  href="{% url 'business' %}" role="tab" aria-controls="v-pills-settings" aria-selected="false" style="color: white;height: 55px;line-height: 35px"><img src="/static/img/circle.svg" style="position:relative;right:10px;bottom: 1px">商机</a>
                <a class="nav-link {% if page == 'offer' %}active{% endif %}" id="v-pills-settings-tab"  href="{% url 'offer' %}" role="tab" aria-controls="v-pills-settings" aria-selected="false" style="color: white;height: 55px;line-height: 35px"><img src="/static/img/circle.svg" style="position:relative;right:10px;bottom: 1px">报价</a>
                <a class="nav-link {% if page == 'contract' %}active{% endif %}" id="v-pills-settings-tab"  href="{% url 'contract' %}" role="tab" aria-controls="v-pills-settings" aria-selected="false" style="color: white;height: 55px;line-height: 35px"><img src="/static/img/circle.svg" style="position:relative;right:10px;bottom: 1px">合同</a>
                <a class="nav-link {% if page == 're_money' %}active{% endif %}" id="v-pills-settings-tab"  href="{% url 'return_m' %}" role="tab" aria-controls="v-pills-settings" aria-selected="false" style="color: white;height: 55px;line-height: 35px"><img src="/static/img/circle.svg" style="position:relative;right:10px;bottom: 1px">回款</a>
                <a class="nav-link {% if page == 'delivery' %}active{% endif %}" id="v-pills-settings-tab"  href="{% url 'delivery' %}" role="tab" aria-controls="v-pills-settings" aria-selected="false" style="color: white;height: 55px;line-height: 35px"><img src="/static/img/circle.svg" style="position:relative;right:10px;bottom: 1px">交付</a>
                <a class="nav-link {% if page == 'bill' %}active{% endif %}" id="v-pills-settings-tab"  href="{% url 'bill' %}" role="tab" aria-controls="v-pills-settings" aria-selected="false" style="color: white;height: 55px;line-height: 35px"><img src="/static/img/circle.svg" style="position:relative;right:10px;bottom: 1px">发票</a>
                <a class="nav-link {% if page == 'refund' %}active{% endif %}" id="v-pills-settings-tab"  href="{% url 'refund' %}" role="tab" aria-controls="v-pills-settings" aria-selected="false" style="color: white;height: 55px;line-height: 35px"><img src="/static/img/circle.svg" style="position:relative;right:10px;bottom: 1px">退货退款</a>
            </div>
        </div>
        <div id="rightContent">
            {% block content %}
            {% endblock %}
        </div>
</div>

  <footer>
      <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
      <script type="text/javascript" src="/static/bootstrap/js/bootstrap.bundle.js"></script>
      <script type="text/javascript" src="/static/bootstrap/js/bootstrap.js"></script>
  </footer>
  </body>
</html>